<template>
  <div class="pagination">
    <span class="total"> 共计 {{ total }} 条</span>
    <button @click="prevPage" :disabled="currentPage === 1" class="forward" />

    <!-- 显示页码按钮 -->
    <button
      v-for="page in pages"
      :key="page"
      @click="goToPage(page)"
      :class="{ active: currentPage === page }"
    >
      {{ page }}
    </button>

    <button
      @click="nextPage"
      :disabled="currentPage === totalPages"
      class="next"
    />
  </div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
  total: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(["update:currentPage"]);

// 生成页码数组
const pages = computed(() => {
  let arr = [];
  for (let i = 1; i <= props.totalPages; i++) {
    arr.push(i);
  }
  return arr;
});

const goToPage = (page) => {
  emit("update:currentPage", page);
};

const prevPage = () => {
  if (props.currentPage > 1) {
    emit("update:currentPage", props.currentPage - 1);
  }
};

const nextPage = () => {
  if (props.currentPage < props.totalPages) {
    emit("update:currentPage", props.currentPage + 1);
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  .forward {
    transform: scaleY(1.4) translateY(-2px);
    &::before {
      content: "<";
      color: #fff;
      font-size: 18px;
    }
  }
  .next {
    transform: scaleY(1.4) translateY(-2px);
    &::after {
      content: ">";
      color: #fff;
      font-size: 18px;
    }
  }
}
.total {
  color: #fff;
  font-size: 14px;
}

button {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: white;
  font-size: 14px;
}

button.active {
  background-color: #175c98;
  color: white;
  border-radius: 2px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
